import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_echarts/flutter_echarts.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:yt_devops/resources/str_res_keys.dart';
import 'package:yt_devops/styles/styles.dart';
import 'package:yt_devops/utils/extensions.dart';
import 'package:yt_devops/utils/func_utils.dart';

class StoragePowerLineChart extends StatefulWidget {
  final LineChartData chartData;
  final String? axisLabel;

  const StoragePowerLineChart({
    super.key,
    required this.chartData,
    this.axisLabel,
  });

  @override
  State<StoragePowerLineChart> createState() => _LineChartState();
}

class _LineChartState extends State<StoragePowerLineChart> {
  bool isload = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          // CompChartLenged(widget.lineData.legend),
          Container(
            padding: EdgeInsets.only(right: 12.w),
            height: 214.h,
            child: Echarts(
              captureAllGestures: true,
              option: '''
               { 
                grid: {
                  top: 40,
                  bottom: 16,
                  right: ${FuncUtils.getWidthByLocal(40, 60)},
                  left:16,
                  containLabel: true,
                
                },
                
                tooltip: {
                  trigger: 'axis',
                  backgroundColor: 'rgba(0,0,0,0.85)',
                  borderWidth: 0,
                  opacity: 0.2,
                  confine: true,
                  textStyle: {
                    color: 'white'
                  },
           
                  formatter:function(params) {
                    const { value, name } = (params || [{}])[0];
                    const result = [name];
                    if( value[1] != null) {
                      result.push(
                        value[1] < 0
                        ? value[1] + "\ ${widget.chartData.unit}（<span style='\color:${FuncUtils.corlorToRgba(Colour.primaryColor)}\' >${ResKey.discharge.tr}</span>）"
                        : value[1] + "\ ${widget.chartData.unit}（<span style='\color:${FuncUtils.corlorToRgba(Colour.green)}\' >${ResKey.charge.tr}</span>）",
                      );
                      
                    }
                    return result.join('<br/>');
                  }
                },
                yAxis: {
                  type: 'value',
                  name: '${ResKey.unit.tr}（${widget.chartData.unit}）',
                    nameTextStyle: {
                    padding: [0, 0, 5, 0]
                  },
                  min: ${widget.chartData.min} ?? undefined ,
                  max: ${widget.chartData.max} ?? undefined ,
                  axisLine:{
                    show:true,
                    lineStyle: {
                      color:'#999999',
                      type:'dashed'
                    }
                  },
                
                  splitLine:{
                    show:true,
                    lineStyle:{
                      color:'rgba(0, 0, 0, 0.09)'
                    }
                  }
                },
                xAxis: {
                  type: 'category',                
                  splitNumber:1,
                  axisLine:{
                    show:true,
                    lineStyle: {
                      color:'#999999',
                      type:'dashed'
                    }
                  },
                  axisLabel: ${widget.axisLabel}
                },
                visualMap: {
                  show: false,
                  pieces: [
                    {
                      gt: 0.1,
                      color:'#00AE66',
                    },
                    {
                      lte: 0,
                      color: '#0984F9',
                    },
                  ],
                },
                dataZoom: [
                  {
                    type: 'inside',
                   
                  
                  },
                 
                ],
                series: [
                {
                  type: 'line',
                
                  markLine: {
                    data: [
                      {
                        yAxis: 0,
                        label: {
                          show: true,
                          color: '#00AE66',
                          formatter: '${ResKey.charge.tr}\\n\\n\\n\\n\\n\\{dis|${ResKey.discharge.tr}}\',
                          rich: {
                            dis: {
                              color:'#0984F9',
                            },
                          },
                        },
                        lineStyle: {
                          color: 'transparent',
                        },
                      },
                    ],
                  },
                  data:${jsonEncode(widget.chartData.data)}
                },],
              }
              ''',
            ),
          )
        ],
      ),
    );
  }
}

class LineChartData {
  List<List> data;
  List<Color> color;
  String unit;
  double? max;
  double? min;

  LineChartData(
      {required this.color,
      required this.data,
      required this.unit,
      this.max,
      this.min});
}

class VariableModel {
  double y;
  String x;
  String group;

  VariableModel({required this.x, required this.y, required this.group});

  // Map<String,dynamic> toMap => {

  //  }
}
